import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { observer } from 'mobx-react';
import SettingStyle from '@/page/setting/setting.scss';
const selected = {
    background: 'url("/static/alliance2/image/setting/yuanquanxuanzhong.png") no-repeat'
};
@observer class MessageList extends Component {
    static propTypes = {
        dataSource: PropTypes.array
    };
    constructor(props) {
        super(props);
        let rowsState = [];
        props.dataSource.forEach((val, index) => {
            rowsState[index] = false;
        });
        this.state = {
            selected: null,
            rowsState
        };
    }
    checkAll = e => {
        let { rowsState } = this.state;
        rowsState = rowsState.map((val, index) => {
            return  true;
        });
        this.setState({ rowsState });
    };
    unCheckAll = () => {
        let { rowsState } = this.state;
        rowsState = rowsState.map((val, index) => {
            return  false;
        });
        this.setState({ rowsState });
    };
    clickItem = index => {
        let { rowsState } = this.state;
        rowsState[index] = !rowsState[index];
        console.log(this.label);
        console.log(this.label.style);
        this.label.style.background = 'url("/static/alliance2/image/setting/yuanquanxuanzhong.png") no-repeat';
        this.setState({ rowsState });
    };
    componentWillReceiveProps = nextProps => {
        let rowsState = [];
        this.props.dataSource.forEach((val, index) => {
            rowsState[index] = false;
        });
    };
    render() {
        const { dataSource } = this.props;
        const { rowsState } = this.state;
        const liStyle = {
            width: 400,
            height: 40,
            listStyleType: 'none'
        };
        const inputStyle = {
            width: 24,
            height: 24,
            display: 'inline-block',
            position: 'relative',
            top: 6,
            visibility: 'hidden'
        };
        const labelStyle = {
            width: 19,
            height: 19,
            display: 'inline-block'
        };
        const items = dataSource.map((val, index) => {
            return <li key={ index } style={ liStyle }><label style = { labelStyle } ref = { label => this.label = label }  htmlFor={ val.id }><span ref = { span => this.labelSpan = span } style={ this.state.selected } className={SettingStyle['circle-btn']}  /><input id={ val.id } style={inputStyle} type="checkbox" checked={rowsState[index]} onClick={ () => this.clickItem( index )}/></label><span>{val.msg}</span></li>
        });
        let selectAll = true;
        rowsState.forEach(val => {
            if ( !val ) selectAll = false;
        });
        return (
            <div className={SettingStyle['message-list']}>
                <ul>
                    { items }
                    <li style={ liStyle }><input style={ inputStyle } type="checkbox" checked={ selectAll } onClick={ !selectAll ? this.checkAll : this.unCheckAll }/><span>全选1</span></li>
                </ul>
            </div>
        );
    }
}
export default MessageList;